<template>
  <!--
    底图控制器组件
  -->
  <div class="basemap-control">
    <p class="demonstration">搜索</p>
    <div class="flex">
      <el-input v-model="locationName" style="width: 140px;" placeholder="请输入位置名称"/>
      <el-button type="primary" @click="searchBtn">搜索</el-button>
    </div>
    <ul class="location-list-ul">
      <li v-for="(item,index) of options" :key="item.hotPointID" @click="locationItemBtn(item)">
        <div class="location-index">序号：{{ index + 1 }}</div>
        <div class="location-name">名称：{{ item.name }}</div>
        <div class="location-address">地址：{{ item.address }}</div>
      </li>
    </ul>
    <!--        <el-select-->
    <!--          v-model="locationName"-->
    <!--          filterable-->
    <!--          remote-->
    <!--          reserve-keyword-->
    <!--          placeholder="请输入位置名称"-->
    <!--          :remote-method="remoteMethod"-->
    <!--          :loading="loading"-->
    <!--          style="width: 240px"-->
    <!--        >-->
    <!--          <el-option-->
    <!--            v-for="item in options"-->
    <!--            :key="item.hotPointID"-->
    <!--            :label="item.name"-->
    <!--            :value="item.lonlat"-->
    <!--          />-->
    <!--        </el-select>-->


    <p class="demonstration">底图</p>

    <el-tree
      :data="data"
      show-checkbox
      @check-change="changeBasemap"
      ref="treeRef"
      node-key="value"
    />

    <!--    <el-tree-->
    <!--      :data="baseMapList"-->
    <!--      show-checkbox-->
    <!--      @check-change="changeBasemap"-->
    <!--      ref="treeRef"-->
    <!--      :props="defaultProps"-->
    <!--    />-->

    <div class="slider-demo-block">
      <span class="demonstration">透明度</span>
      <div v-for="(item,index) in baseMapList3">
        <span style="font-size: 12px;color: #ffffff">{{ item.title }}透明度</span>
        <el-slider v-model="item.transparency" @input="changeTransparency(item.transparency, index)"/>
      </div>
    </div>
    <div class="slider-demo-block">
      <span class="demonstration">定位</span>
      <el-button @click="positioningBtn(1)">全球</el-button>
      <el-button @click="positioningBtn(2)">中国</el-button>
      <el-button @click="positioningBtn(3)">株洲</el-button>
    </div>
    <div class="slider-demo-block">
      <span class="demonstration">添加视角</span>
      <el-button @click="addVisualAngleBtn">添加此视角</el-button>
    </div>
    <ul class="visual-angle-list">
      <li
        v-for="item of visualAngleList"
        :key="item.id"
        @click="visualAngleBtn(item)"
      >
        <img class="map-thumbnail" :src="item.imageUrl"/>
        {{ item.title }}
      </li>
      <!--      <li>视角2</li>-->
      <!--      <li>视角3</li>-->
    </ul>
  </div>
</template>
<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";

/** element-plus */
const defaultProps = {
  children: 'children',
  label: 'title',
}
const baseMapList3 = ref( [
  {
    id: '1-1',
    title: "Bing底图（影像）",
    //透明度
    transparency: 100,
  },
  {
    id: '1-2',
    title: "Bing底图（矢量）",
    //透明度
    transparency: 100,
  },
  {
    id: '2-1',
    title: "天地图（影像）",
    //透明度
    transparency: 100,
  },
  {
    id: '2-2',
    title: "天地图（矢量）",
    //透明度
    transparency: 100,
  },
  {
    id: '3',
    title: "ArcGIS",
    transparency: 100,
  },
  {
    id: '4',
    title: "高德",
    transparency: 100,
  },
  {
    id: '5',
    title: "株洲底图",
    transparency: 100,
  },
  {
    id: '6',
    title: "江苏矢量底图",
    transparency: 100,
  },
  {
    id: '7',
    title: "江苏注记底图",
    transparency: 100,
  },
  {
    id: '8',
    title: "江苏中学",
    transparency: 100,
  },
  {
    id: '9',
    title: "江苏医院",
    transparency: 100,
  },
]);
/**
 * 定义事件
 * @type {EmitFn<(string)[]>}
 * 事件说明:
 * changeBasemap：切换底图
 * changeTransparency：切换透明度
 * positioningBtn：定位（这个是固定的，全球或中国）这里我们就写一个方法把，根据id来，1表示全球，2表示中国
 * addVisualAngle：添加定位按钮
 * visualAngleBtn：视角定位按钮（每一个小li）
 * locationItemBtn：地址定位的方法
 * locationSearchBtn：位置搜索按钮的方法
 */
const emit = defineEmits(['changeBasemap', 'changeTransparency', 'positioningBtn', 'addVisualAngle', 'visualAngleBtn', 'locationSearchBtn', 'locationItemBtn']);
/**
 * props说明
 * visualAngleList 视角列表
 */
const props = defineProps(['visualAngleList', 'baseMapList']);
const basemapList = ref([
  {
    id: 1,
    title: "Bing底图（影像）",
    type: "bing",
    //透明度
    transparency: 100,
    //cesium图层对象
    imageryProvider: null
  },
  {
    id: 2,
    title: "天地图（矢量）",
    type: "tianditu",
    //透明度
    transparency: 100,
    //cesium图层对象
    imageryProvider: null
  },
  {
    id: 3,
    title: "ArcGIS在线地图",
    type: "arcgis",
    //透明度
    transparency: 100,
    //cesium图层对象
    imageryProvider: null
  },
  {
    id: 4,
    title: "高德底图",
    type: "gaode",
    //透明度
    transparency: 100,
    //cesium图层对象
    imageryProvider: null
  },
  {
    id: 5,
    title: "天地图（影像）",
    type: "tianditu",
    //透明度
    transparency: 100,
    //cesium图层对象
    imageryProvider: null
  },
  {
    id: 6,
    title: "Bing底图（矢量）",
    type: "bing_shiliang",
    //透明度
    transparency: 100,
    //cesium图层对象
    imageryProvider: null
  },
  {
    id: 7,
    title: "株洲GeoServer地图",
    type: "zhuzhou",
    //透明度
    transparency: 100,
    //cesium图层对象
    imageryProvider: null
  }
]);

const data = [
  {
    value: '1',
    label: 'Bing地图',
    children: [
      {
        value: '1-1',
        label: 'Bing影像地图',
      },
      {
        value: '1-2',
        label: 'Bing矢量地图',
      },
    ],
  },
  {
    value: '2',
    label: '天地图',
    children: [
      {
        value: '2-1',
        label: '天地图影像地图',
      },
      {
        value: '2-2',
        label: '天地图矢量地图',
      }
    ],
  },
  {
    value: '3',
    label: 'ArcGis在线地图',
  },
  {
    value: '4',
    label: '高德地图',
  },
  {
    value: '5',
    label: '株洲GeoServer地图',
  },
  {
    value: '6',
    label: '江苏省矢量底图',
  },
  {
    value: '7',
    label: '江苏省注记底图',
  },
  {
    value: '8',
    label: '江苏中学',
  },
  {
    value: '9',
    label: '江苏医院',
  },
];

//透明度列表
const transparencyList = ref([

]);

//当前选中的底图id
const currentBasemapIdList = ref([1]);
//透明度
/** 搜索的地方名称 */
const locationName = ref();
/** 搜索的列表选项，用于请求接口 */
const options = ref([]);
//树形结构的ref对象
const treeRef = ref(null);
// onMounted(()=>{
//   initData();
// });

/**
 * @description 初始化数据方法
 */
// function initData() {
//   emit("initData", basemapList.value);
// }

/**
 * @description 搜索按钮的方法
 */
const searchBtn = () => {
  console.log(120, locationName.value);
  // axios.get(`http://api.tianditu.gov.cn/v2/search?postStr={'keyWord':${locationName.value},'level':17,'mapBound':'116.02524,39.83833,116.65592,39.99185','queryType':1,'start':0,'count':10,'specify':156110000}&type=query&tk=7a78bc560f14ba05e24791961deee361`).then((result) => {
  axios.get(`http://api.tianditu.gov.cn/v2/search?postStr={"keyWord":'${locationName.value}',"level":12,"mapBound":"116.02524,39.83833,116.65592,39.99185","queryType":2,"start":0,"count":10}&type=query&tk=7a78bc560f14ba05e24791961deee361`).then((result) => {
    console.log(123, result);
    options.value = result.data.pois;
    //搜索完毕后，我们开始加入点，但是我们不能在子组件中加入，必须传给父组件，让父组件进行加载点
    emit("locationSearchBtn", options.value);
  }, (error) => {
    console.log(error);
  });
}

/**
 * @description 地名搜索完毕后，搜索的的单击事件，用于定位
 * @param item 当前对象
 */
function locationItemBtn(item) {
  console.log(169, item);
  // return;
  // //这里的经纬度需要我们进行手动切换一下
  // const logAndLatList = lonlat.split(',')
  // const log = parseFloat(logAndLatList[0]);
  // const lat = parseFloat(logAndLatList[1]);
  emit("locationItemBtn", item);
}

/**
 * @description 切换底图事件，这里我们传给父组件
 * @param currentBasemapItem 当前选中的底图对象
 * @param isCurrentCheck 节点本身是否被选中
 * @param isHaveSelected 节点的子树中是否有被选中的节点
 */
function changeBasemap(currentBasemapItem, isCurrentCheck, isHaveSelected) {
  // console.log(236, currentBasemapItem);
  //这里我们需要整理出来当前选中的底图服务，然后传递给父组件，让父组件直接进行渲染
  //这里，我们将当前选中的下标传递给父组件
  // console.log(294,props.baseMapList);
  // props.baseMapList
  // props.baseMapList.find((value,index)=>{
  //   va
  // });
  // console.log(299, props.baseMapList.filter((value, index) => {
  //   if (value.id === currentBasemapItem.value) {
  //     return index;
  //   }
  // }));
  //当前选中的下标数组
  // const currentIndexList=[];
  // 获取当前选中的节点
  const checkedNodes = treeRef.value.getCheckedNodes();
  // console.log(307, checkedNodes);
  // checkedNodes.forEach((item) => {
  //   const currentIndex=props.baseMapList.findIndex((item2) => {
  //     return item2.id === item.value;
  //   });
  //   if (currentIndex!==-1){
  //     currentIndexList.push(currentIndex);
  //   }
  // });
  /** 明天从这里继续写，需求为完善图层树形结构 */
  // return
  //这里我们将列表也传过去，否者报错
  // emit("changeBasemap", currentIndexList, basemapList.value);
  emit("changeBasemap", checkedNodes,currentBasemapItem);
}

/**
 * @description 当透明度滑块改变时触发
 * @param currentValue 当前修改的透明度
 * @param index 当前修改的透明度下标值
 */
function changeTransparency(currentValue, index) {
  console.log(342, currentValue, index);
  //这里我们转换好之后,在传送给父组件,
  emit("changeTransparency", currentValue, index);
}


/**
 * @description 定位操作
 * @param positionId 定位的类型，1表示全球，2表示中国
 */
function positioningBtn(positionId) {
  //这里我们转换好之后,在传送给父组件,
  emit("positioningBtn", positionId);
}

/**
 * @description 添加视角按钮
 */
function addVisualAngleBtn() {
  emit("addVisualAngle");
}

/**
 * @description 添加视角后的定位
 * @param currentItem 当前单击的对象
 */
function visualAngleBtn(currentItem) {
  emit("visualAngleBtn", currentItem);
}


</script>
<style scoped>
.basemap-control {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  width: 240px;
  max-height: 600px;
  background: #393A3D;
  overflow: auto;
}

.demonstration {
  display: block;
  margin: 10px 0;
  color: #ffffff;
}

.visual-angle-list {
  color: #ffffff;
  list-style: none;

}

.visual-angle-list li {
  margin: 10px;
  cursor: pointer;
  width: max-content;
}

.visual-angle-list li:hover {
  color: #409eff;
}

.map-thumbnail {
  width: 60px;
  height: 60px;
  border-radius: 10px;
}

.location-list-ul {
  //position: absolute;
  //z-index: 9;
  max-height: 200px;
  overflow: auto;
}

.location-list-ul li {
  color: #000;
  margin: 10px auto;
  background: #ffffff;
  cursor: pointer;
}
</style>
